<template>
<div>
  <topp></topp>

  <div class="box">
    <div class="q1">
      <van-loading color="#0094ff" size="40" class="quan" v-if="n == null" />
      <yuan v-else></yuan>
    </div>
    <div class="q3">
      <div class="q2" v-if="config.data.length != 0">
        <dv-scroll-board :config="config" style="width: 600px; color: #000" />
      </div>
    </div>

<div>
   <div class="bottom">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide qwe" v-for="item in lun" :key="item.id" >
            <img :src="item.imag" width="120" height="120"/>
            <h2>{{ item.jiage }}</h2>
            <p class="ee">{{ item.xinxi }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</div>

   
</template>

<script>
import topp from './index_top.vue'
import axios from "axios";
import yuan from "@/components/charts/yuan";
import Swiper from "swiper";
export default {
  data() {
    return {
      lun: null,
      n: null,
      config: {
        align: ["center"],
        waitTime: 1000,
        headerBGC: "#fff",
        oddRowBGC: "#fff",
        evenRowBGC: "#fff",
        columnWidth: [[100], [80], [70], [100], [100], [200]],
        header: ["订单号", "分类", "图片", "件数", "金额", "商品名称"],
        data: [],
      },
    };
  },
  components: {
    topp,
    yuan,
  },

  mounted() {
    axios.get("http://10.0.31.157:8888/commodity").then((re) => {
      re.data.forEach((item) => {
        this.config.data.push([
          item.id,
          item.lei,
          `<img src="${item.imag}" width="100%" height="100%">`,
          "1",
          item.jiage,
          item.xinxi,
        ]);
      });
    });
    setTimeout(() => {
      this.n = 123;
    }, 1000);
    var swiper = new Swiper(".swiper-container", {
      slidesPerView: 4,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
    axios.get("http://10.0.31.157:8888/commodity").then((res) => {
      this.lun = res.data;
      console.log(this.lun);
    });
  },
};
</script>
























<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  margin-top: 20px;
  width: 100%;
}
.q1 {
  width: 600px;
  height: 400px;
  margin-right: 50px;
  float: left;
  box-shadow: 0px 0px 10px #dddddd;
}
.q3 {
  width: 700px;
  height: 400px;
  margin-top: 25px;
  float: left;
  display: flex;
  align-content: center;

  // box-shadow: 0px 0px 10px #dddddd;
}
.q2 {
  width: 700px;
  height: 350px;

  box-shadow: 0px 0px 10px #dddddd;
}

.quan {
  width: 600px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ee{
  width: 160px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  color: darkgray;
}
.qwe{
  width: 300px;
  height: 220px;
}
.bottom {
  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

  
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
}
</style>


